import React, { Component } from "react";
 

import store from "./store";
import Container from "./container";
import {
  handleAction,
  addAction,
  deleteAction,
  AsyncAction 
} from "./store/action";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handlesorechange = this.handlesorechange.bind(this);
    this.handledelete = this.handledelete.bind(this);
   
    // store.subscribe(this.handlesorechange);
  } // componentDidMount() {
  //   //检测redux中状态的变化，只要变化，就调用render
  //   store.subscribe(() => {
  //     this.setState({});
  //   });}
  handlesorechange() {
    this.setState(store.getState());
  }
  componentDidMount() {
    store.subscribe(this.handlesorechange);
    store.dispatch(AsyncAction())
  }

  handleChange = (e) => {
    store.dispatch(handleAction(e.target.value));
    console.log(this.state);
  };
  pushaddAction = () => {
    store.dispatch(addAction());
  };
  handledelete = (index) => {
    console.log(index);
    store.dispatch(deleteAction(index));
  };
  render() {
    return (
      <div className="App">
        <Container
          handleChange={this.handleChange}
          inputValue={this.state.inputValue}
          handledelete={this.handledelete}
          list={this.state.list}
          pushaddAction={this.pushaddAction}
        />
      </div>
    );
  }
}
